<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="content">我是div中的内容</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li class="num">6</li>
        <li class="num">7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <p>one</p>
    <p>two</p>

    <input type="text" value="zheshimingzi" name="username">
    <input type="password" name="password" id="test">
    <div id="test666">
        <div class="child">
            1
        </div>
        <div class="child">
            2
        </div>
        <div class="child"> 
            3
        </div>
    </div>
    <script>
        /* 


        
        
        
        
        
        */

        // 非常规元素 
        // console.log(document.documentElement)
        // console.log(document.body)
        // console.log(document.head)


        // id
        // var res = document.getElementById('content');
        // console.log(res)
        // var res1 = document.querySelector('#content');
        // console.log(res1)

        // class
        // var res = document.getElementsByClassName('num');
        // console.log(res)
        // var res1 = document.querySelectorAll('.num');
        // console.log(res1)
        // 标签名
        //  var res = document.getElementsByTagName('p');
        // console.log(res)
        // var res1 = document.querySelectorAll('p');
        // console.log(res1)

        // name 
        // var res = document.getElementsByName('password');
        // console.log(res)


        // var parents = document.getElementById('test') //先找父亲
        // var parents = document.querySelector('#test666');
        // 在父亲元素中找到 所有的目标 
        // console.log(parents)
        // var res = parents.getElementsByClassName('child');

        // // console.log(res);
        // for(var i of res){
        //     console.log(i)
        // }
        // 找元素方法很多 不拘泥一种 
        

    </script>
</body>
</html>